<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 火星云盘系统</title>
    
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    
    <style>
        body {
            background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
        }

        .login-container {
            background: white;
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            width: 900px;
            max-width: 95%;
            display: flex;
        }

        .login-left {
            flex: 1;
            background: linear-gradient(135deg, #2979ff 0%, #1e6fff 100%);
            padding: 60px 40px;
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .logo-area {
            margin-bottom: 30px;
        }

        .logo-icon {
            width: 80px;
            height: 80px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 40px;
        }

        .logo-text {
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .logo-desc {
            font-size: 16px;
            opacity: 0.9;
        }

        .login-features {
            margin-top: 40px;
            text-align: left;
        }

        .feature-item {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .feature-item i {
            font-size: 24px;
            margin-right: 15px;
        }

        .login-right {
            flex: 1;
            padding: 60px 40px;
        }

        .login-title {
            font-size: 28px;
            font-weight: 700;
            color: #333;
            margin-bottom: 10px;
        }

        .login-subtitle {
            color: #666;
            margin-bottom: 40px;
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-label {
            font-weight: 500;
            color: #333;
            margin-bottom: 8px;
        }

        .form-control {
            height: 48px;
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            padding: 0 16px;
            font-size: 14px;
        }

        .form-control:focus {
            border-color: #2979ff;
            box-shadow: 0 0 0 3px rgba(41, 121, 255, 0.1);
        }

        .input-group-text {
            background: white;
            border: 1px solid #e0e0e0;
            border-right: none;
            border-radius: 8px 0 0 8px;
        }

        .input-group .form-control {
            border-left: none;
            border-radius: 0 8px 8px 0;
        }

        .btn-login {
            width: 100%;
            height: 48px;
            background: linear-gradient(135deg, #2979ff 0%, #1e6fff 100%);
            border: none;
            border-radius: 8px;
            color: white;
            font-size: 16px;
            font-weight: 600;
            margin-top: 30px;
            transition: all 0.3s;
        }

        .btn-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(41, 121, 255, 0.3);
        }

        .register-link {
            text-align: center;
            margin-top: 20px;
            color: #666;
        }

        .register-link a {
            color: #2979ff;
            text-decoration: none;
            font-weight: 600;
        }

        .register-link a:hover {
            text-decoration: underline;
        }

        @media (max-width: 768px) {
            .login-container {
                flex-direction: column;
            }
            
            .login-left {
                padding: 40px 20px;
            }
            
            .login-features {
                display: none;
            }
        }
    </style>
</head>
<body>

<div class="login-container">
    <div class="login-left">
        <div class="logo-area">
            <div class="logo-icon">
                <i class="bi bi-rocket-takeoff-fill"></i>
            </div>
            <div class="logo-text">火星云盘系统</div>
            <div class="logo-desc">安全可靠的云存储服务</div>
        </div>
        
        <div class="login-features">
            <div class="feature-item">
                <i class="bi bi-shield-check"></i>
                <div>
                    <div style="font-weight: 600;">安全可靠</div>
                    <div style="font-size: 14px; opacity: 0.8;">数据加密存储</div>
                </div>
            </div>
            <div class="feature-item">
                <i class="bi bi-lightning-charge"></i>
                <div>
                    <div style="font-weight: 600;">极速传输</div>
                    <div style="font-size: 14px; opacity: 0.8;">闪电般的上传下载</div>
                </div>
            </div>
            <div class="feature-item">
                <i class="bi bi-globe"></i>
                <div>
                    <div style="font-weight: 600;">随时随地</div>
                    <div style="font-size: 14px; opacity: 0.8;">多平台同步访问</div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="login-right">
        <h2 class="login-title">欢迎回来</h2>
        <p class="login-subtitle">请登录您的账户</p>
        
        <form id="loginForm">
            <div class="form-group">
                <label class="form-label">用户名</label>
                <div class="input-group">
                    <span class="input-group-text">
                        <i class="bi bi-person"></i>
                    </span>
                    <input type="text" class="form-control" id="username" placeholder="请输入用户名" required>
                </div>
            </div>
            
            <div class="form-group">
                <label class="form-label">密码</label>
                <div class="input-group">
                    <span class="input-group-text">
                        <i class="bi bi-lock"></i>
                    </span>
                    <input type="password" class="form-control" id="password" placeholder="请输入密码" required>
                </div>
            </div>
            
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="remember">
                <label class="form-check-label" for="remember">
                    记住我
                </label>
            </div>
            
            <button type="submit" class="btn btn-login">登 录</button>
        </form>
        
        <div class="register-link">
            还没有账户？<a href="/register">立即注册</a>
        </div>
        
        <div class="register-link" style="margin-top: 10px; font-size: 13px;">
            <span style="color: #999;">默认账户: admin / admin123</span>
        </div>
    </div>
</div>

<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
    document.getElementById('loginForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        
        if (!username || !password) {
            showAlert('请填写完整的登录信息', 'warning');
            return;
        }
        
        try {
            const response = await fetch('/user/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ username, password })
            });
            
            const result = await response.json();
            
            if (result.success) {
                showAlert('登录成功，正在跳转...', 'success');
                setTimeout(() => {
                    window.location.href = '/';
                }, 1000);
            } else {
                showAlert(result.message, 'danger');
            }
        } catch (error) {
            showAlert('登录失败，请稍后重试', 'danger');
        }
    });
    
    function showAlert(message, type) {
        const alertDiv = document.createElement('div');
        alertDiv.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
        alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
        alertDiv.innerHTML = `
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        document.body.appendChild(alertDiv);
        
        setTimeout(() => {
            alertDiv.remove();
        }, 3000);
    }
</script>

</body>
</html>

